<template>
  <div class="tableData">
    <el-table
      :data="tableData"
      style="width: 100%"
      max-height="730"
      v-loading="tableLoading"
    >
      <el-table-column type="index" label="序号" width="60" align="center" />
      <el-table-column prop="stuNum" label="学号" align="center" sortable />
      <el-table-column prop="name" label="姓名" align="center" />
      <el-table-column
        prop="className"
        label="班级"
        align="center"
        sortable
        column-key="className"
        :filters="filterClass"
        :filter-method="filterHandler_class"
      />
      <el-table-column prop="taskScore" label="分数" align="center" sortable />
      <el-table-column prop="mark" label="备注" align="center" sortable />
    </el-table>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  data() {
    return {
      tableData: [],
      isGetTaskData: false
    };
  },
  props: {
    courseInfo: Object,
    currTaskGroupID: Number,
    currTaskID: Number,
    studenData: Array,
    tableLoading: Boolean,
  },
  computed: {
    ...mapState({
      classList: (state) => state.class.classList
    }),
    filterClass() {
      let classList = [];
      this.studenData.forEach((item) => {
        if (
          item.className &&
          !classList.some((citem) => citem.value == item.className)
        ) {
          classList.push({ text: item.className, value: item.className, classID: item.classID });
        }
      });
      // 把课程原有班级也加上
      if (this.filterCourseClass?.length) {
        this.filterCourseClass.forEach(item => {
          if (item.className && !classList.some((citem) => citem.value == item.className)) {
            classList.push({ text: item.className, value: item.className, classID: item.classID });
          }
        })
      }
      return classList;
    },
    // 获取当前课程班级数据
    filterCourseClass() {
      if (this.courseInfo?.classIDList) {
        const classList = this.courseInfo.classIDList.split(',').map(i => Number(i))
        return this.classList.filter(i => classList.some(s => i.classID == s))
      } else return []
    },
  },
  watch: {
    studenData(n) {
      if (this.currTaskGroupID && this.currTaskID) {
        this.filterStuData();
      }
    },
    currTaskID(n) {
      this.isGetTaskData = false
      if (this.studenData.length) {
        this.filterStuData();
      }
    },
  },
  methods: {
    filterHandler(value, row, column) {
      const property = column["property"];
      return row[property] === value;
    },
    // 过滤班级信息
    filterHandler_class(value, row, column) {
      const property = column["property"];
      const cData = column.filters.find(item => item.value == value)
      let uOtherClassList = []
      if (row.otherClassIDList) {
        uOtherClassList = row.otherClassIDList.split(',').map(i => Number(i))
      }
      return row[property] === value || uOtherClassList.indexOf(cData.classID) !== -1;
    },
    filterStuData(that) {
      that = that || this
      let arr = [];
      let userIDArray = [];
      that.studenData.forEach((item) => {
        // if (item.taskGroupResults[that.currTaskGroupID]) {
        if (!item?.allTaskResultsInChooseNo) return userIDArray.push(item.userID)
        let findTask = item.allTaskResultsInChooseNo.find(
          (titem) => titem.taskID === that.currTaskID
        );
        if (!findTask && !item.getAllTask) return userIDArray.push(item.userID)
        if (findTask) {
          arr.push(
            Object.assign(findTask, {
              name: item.realName || item.nickName || item.regName,
              className: item.className,
              stuNum: item.stuNum,
              mark: "",
            })
          );
        } else {
          Object.assign({
            name: item.realName || item.nickName || item.regName,
            className: item.className,
            stuNum: item.stuNum,
            mark: "无此任务数据",
          });
        }
        // } else {
        //   arr.push(
        //     Object.assign({
        //       name: item.realName || item.nickName || item.regName,
        //       className: item.className,
        //       stuNum: item.stuNum,
        //       mark: "无此任务组数据",
        //     })
        //   );
        // }
      });
      that.tableData = arr;
      if (userIDArray.length && !this.isGetTaskData) {
        this.$emit("getStuTaskData", 
          {
            taskGroupID: Number(this.currTaskGroupID), 
            taskID: this.currTaskID, 
            currNo: this.$route.query.currNo, 
            userIDArray
          },
          this.filterStuData, 
          this
        )
        this.isGetTaskData = true
      }
    },
  },
};
</script>

<style lang="stylus">
.tableData {
  margin-top: 20px;
}
</style>